<!--
 * @Author: your name
 * @Date: 2020-11-03 16:33:09
 * @LastEditTime: 2020-11-20 17:11:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\components\purchaseLens\addToCart.vue
-->
<template>
  <div class="addToCart">
    <div class="addToCart_img">
        <img class="img" src="http://www.eyecedar.com/media/catalog/product/1/_/1_24_6.jpg" alt="">
    </div>
    <div class="addToCart_option">
        <ul class="addToCart_ul">
            <li class="addToCart_li ptb10 plr20">
                <div class="left">{{$t('purchaseLens.Frame')}}:</div>
                <div class="center">{{$t('Black')}}</div>
                <div class="right">{{$t('$')}}89</div>
            </li>
            <li class="addToCart_li ptb10 plr20">
                <div class="left">{{$t('purchaseLens.Prescription')}}:</div>
                <div class="center">{{$t('Single Vision')}}</div>
                <div class="right"></div>
            </li>
            <li class="addToCart_li ptb10 plr20">
                <div class="left">{{$t('Lenses')}}:</div>
                <div class="center">{{$t('Photochromic 1.61 refractive index')}}</div>
                <div class="right">{{$t('$')}}89</div>
            </li>
        </ul>
        <div class="totalPrice ptb20">{{$t('purchaseLens.Total')}}: {{$t('$')}}199</div>
        <div class="addToCart_btn mb10">
            <nuxt-link class="btn" :to="{path: '/cart', query: { id: 1 }}">{{$t('Add to cart')}}</nuxt-link>
        </div>
        <ul class="addToCart_tips mb10">
            <li class="li ptb10">{{$t('Delivery 5-6 days')}}</li>
            <li class="li ptb10">{{$t('30-day money-back guarantee')}}</li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
@import "~/assets/scss/index.scss";
.addToCart {
    text-align: center;
    &_option,
    &_img {
        width: 420px;
        margin: 0 auto;
    }
    &_img {

        position: relative;
        padding-top: 17%;
        .img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    }
    &_li {
        @include flex();
        justify-content: space-between;
        .left
        ,.center
        ,.right {
            font-size: 14px;
            font-weight: bold;
            text-align: left;
        }
        .left {
            width: 25%;
        }
        .right {
            width: 10%;
        }
    }
    .totalPrice {
        font-size: 18px;
        color: $theme;
    }
    .btn {
        display: block;
        padding: 15px 0;
        background: $theme;
        color: $cfff;
        border-radius: 5px;
        font-size: 22px;
        box-sizing: border-box;
        cursor: pointer;
        &:hover {
            background: $theme1;
        }
    }
    &_tips {
        .li {
            color: #12951e;
            font-size: 15px;
            font-weight: bold;
        }
    }
}
</style>